/*
 * @Author: Siyongkun
 * @Date: 2021-07-24 12:17:48
 * @Last Modified by: Siyongkun
 * @Last Modified time: 2021-07-24 12:22:46
 */
import { Component, createRef } from 'react';
import { _getcityList } from '@/api/request';
import Scroll from '@/components/city';
import './city.scss';
class index extends Component {
  scrollerRef: any = createRef();
  state = {
    citylist: [],
    current: 'A',
  };
  async getcitylist() {
    let res = await _getcityList();
    this.setState({ citylist: res.data.city });
  }
  componentDidUpdate() {
    this.scrollerRef.current.refresh();
  }
  componentDidMount() {
    this.getcitylist();
  }
  scrollElement = (ele: any) => {
    // console.log(ele);
    this.scrollerRef.current.scrollElement(ele);
  };
  render() {
    const { citylist } = this.state;
    return (
      <div className="content-wraper">
        <div className="child-wraper">
          <h1>FirstHand page</h1>
          <div className="scroll-bar" style={{ marginTop: '15px' }}>
            <Scroll refName="scrollBar" scrollbar={false}>
              {citylist &&
                citylist.map((item: any, index) => {
                  return (
                    <li
                      className={
                        item.title === this.state.current
                          ? 'hand current'
                          : 'hand'
                      }
                      key={index}
                      onClick={() => {
                        this.setState({
                          current: item.title,
                        });
                        this.scrollElement(`list-${item.title}`);
                      }}
                    >
                      {item.title}
                    </li>
                  );
                })}
            </Scroll>
          </div>
          <Scroll refName="cityList" ref={this.scrollerRef} top={30}>
            {citylist &&
              citylist.map((city: any) => {
                return (
                  <dl style={{ padding: '15px' }} key={city.title}>
                    <h3 className={`list-${city.title}`}>{city.title}</h3>
                    <ul>
                      {city.lists.map((country: any, index: any) => {
                        return (
                          <li
                            style={{
                              display: 'inline-block',
                              marginRight: '5px',
                              paddingLeft: '5px',
                              marginLeft: '5px',
                              paddingRight: '5px',
                            }}
                            key={index}
                          >
                            {country}
                          </li>
                        );
                      })}
                    </ul>
                  </dl>
                );
              })}
          </Scroll>
        </div>
      </div>
    );
  }
}
export default index;
